import React, { PureComponent } from 'react'
import { Carousel, Flex, Grid, WingBlank,Toast } from 'antd-mobile';
// 导入utils中获取定位城市的方法
import { getCurrentCity } from '../../utils'
import Loading from '../../components/Loading'
import nav1 from '../../assets/images/nav-1.png';
import nav2 from '../../assets/images/nav-2.png';
import nav3 from '../../assets/images/nav-3.png';
import nav4 from '../../assets/images/nav-4.png';
// 导入搜索导航栏组件
import SearchHeader from '../../components/SearchHeader'
import './index.less';

const navs = [
  {
    id: 1,
    title: "整租",
    imgurl: nav1,
    route: "/home/houselist?mode=true",
  },
  {
    id: 2,
    title: "合租",
    imgurl: nav2,
    route: "/home/houselist?mode=false",
  },
  {
    id: 3,
    title: "地图找房",
    imgurl: nav3,
    route: "/map",
  },
  {
    id: 4,
    title: "去出租",
    imgurl: nav4,
    route: "/rent",
  },
]
export default class Index extends PureComponent {
  state = {
    swipers: [],
    imgHeight: 212,
    groups: [],
    news: [],
    // 当前城市名称
    curCityName: '珠海',
  }

  // 发送请求获取轮播图数据
  getSwipers() {
    this.$axios("get", "/home/swiper").then(res => {
      // console.log('res: ', res,this.baseUrl);
      this.setState({
        swipers: res.body
      })
    });
  }
  // 发送请求获取租房小组数据
  getGroups(curCity) {
    this.$axios("get", "/home/groups", { area: curCity.value }).then(res => {
      // console.log('res: ', res);
      this.setState({
        groups: res.body
      })
    });
  }
  // 发送请求获取最新资讯数据
  getNews(curCity) {
    this.$axios("get", "/home/news", { area: curCity.value }).then(res => {
      // console.log('res: ', res);
      this.setState({
        news: res.body
      })
    });
  }

  async componentDidMount() {
    const curCity = await getCurrentCity();
    this.setState({
      curCityName: curCity.label
    });
    this.getSwipers();
    this.getGroups(curCity);
    this.getNews(curCity);
    
  }

  // 阻止a链接跳转
  stopGo(e){
    // console.log('e: ', e);
    e.preventDefault();
  }

  // 渲染轮播图结构
  renderSwipers() {
    return this.state.swipers.map(val => (
      <a
        key={val.id}
        href="www.baidu.com"
        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
        onClick={(e)=>this.stopGo(e)}
      >
        <img
          src={`${this.baseUrl}${val.imgSrc}`}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  openToast = (item) => {
    Toast.info('功能未开放', 1, null, false);
  }

  // 渲染最新资讯
  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id} onClick={this.openToast}>
        <div className="imgwrap">
          <img
            className="img"
            src={`${this.baseUrl}${item.imgSrc}`}
            alt=""
          />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }

  render() {
    const { swipers, imgHeight, groups } = this.state;
    return (
      <div className="index">
        <div className="swiper">
          {
            swipers.length > 0 ? <Carousel
              autoplay
              infinite
            >
              {this.renderSwipers()}
            </Carousel> : <Loading height={imgHeight} />
          }

          {/* 搜索框 */}
          <SearchHeader cityName={this.state.curCityName} />
        </div>
        <Flex className="navs">
          {
            navs.map(v => {
              return <Flex.Item key={v.id} onClick={() => this.props.history.push(v.route)}>
                <img src={v.imgurl} alt={v.title} />
                <h2>{v.title}</h2>
              </Flex.Item>
            })
          }
        </Flex>
        <div className="group">
          <h3 className="title">
            租房小组<span className="more" onClick={()=>{this.props.history.push("/home/houselist")}}>更多</span>
          </h3>
          <Grid data={groups} hasLine={false} square={false} columnNum={2} renderItem={(v) => (
            <Flex className="group-item" justify="around" key={v.id} onClick={()=>{this.props.history.push("/home/houselist")}}>
              <div className="desc">
                <p className="title">{v.title}</p>
                <span className="info">{v.desc}</span>
              </div>
              <img src={this.baseUrl + v.imgSrc} alt={v.title} />
            </Flex>
          )}></Grid>
        </div>
        {/* 最新资讯 */}
        <div className="news">
          <h3 className="group-title">最新资讯</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    )
  }
}
